<template>
      <div class="line_box" ref="echartDom"></div>
  </template>
  
  <script setup lang="ts">
  import { inject, ref, shallowRef, onMounted, onUnmounted, watchEffect,defineEmits} from "vue";
  
  // 接收参数
  const props = defineProps({
    housingSupplyStatsData: {
      type: Object,
      default: () => {},
    },
  });
  // 数据定义
  const echartDom = ref<null | HTMLDivElement>(null);
  const myChart = shallowRef<null | any>(null);
  const echarts = inject<any>("echarts");
  const legendData = ref();
  const xAxisData = ref();
  const yAxisData = ref();
  const seriesData = ref();
  const emit = defineEmits(['dialogData'])
  // 字体自适应方法
  const pxToRem = (px: number) => {
    const scale = document.documentElement.clientWidth / 1920;
    return Math.round(px * Math.min(scale, 3));
  };
  // echarts初始化渲染
  legendData.value = props.housingSupplyStatsData.legendData;
  xAxisData.value = props.housingSupplyStatsData.xAxisData;
  yAxisData.value = props.housingSupplyStatsData.yAxisData; 
  seriesData.value = props.housingSupplyStatsData.seriesData;
  const colors = props.housingSupplyStatsData.colors;
  const typeData = props.housingSupplyStatsData.typeData;

  
  
  const getEchart = () => {
    if (echartDom.value) {
      myChart.value = echarts.init(echartDom.value);
  
      const option = {
        tooltip: {
          trigger: "axis",
          position: function (point, params, dom, rect, size) {
            return [point[1], '10%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
        },
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(40,252,255,0.6)",
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.9)",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(15),
          },
          backgroundColor: "rgba(8, 64, 132, 0.9)",
        },
        legend: {
          icon:"rect",
          orient: 'vertical',//horizontal水平显示
          right:pxToRem(0),
          top: pxToRem(0),
          itemWidth: pxToRem(20),
          itemHeight: pxToRem(12),
          itemGap: pxToRem(6),
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(10),
            rich: {},
            padding: [0, 0, pxToRem(-3), 0],
          },
          data: legendData.value,
        },
        grid: {
          left: "0",
          right: "3%",
          bottom: "7%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          boundaryGap: true,
          data: xAxisData.value,
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: pxToRem(12),
            },
          },
        },
        yAxis: yAxisData.value.map((item: any) => ({
          type: "value",
          name: item,
          nameTextStyle: {
            color: "#959699",
            fontSize: pxToRem(12),
          },
          splitLine: {
            // show: item == "面积" ? false : true,
            lineStyle: {
              color: "#31679C",
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: "{value}",
            color: "#959699",
            fontSize: pxToRem(12),
          },
        })),
        series: seriesData.value.map((data: any, index: string | number) => ({
          name: legendData.value[index],
          type: typeData[index],
          data: data,
          yAxisIndex: yAxisData.value[index] == "面积" ? 1 : 0,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
               global: false,
              colorStops: [
                {
                  offset: 0,
                  color: colors[index].a,
                },
                {
                  offset: 1,
                  color: colors[index].b,
                },
              ],
            },
          },
        })),
      };
      myChart.value.setOption(option);
      myChart.value.getZr().on("click", (params) => {
        emit('dialogData',option)
    });
    }
  };
  
  watchEffect(() => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    props.housingSupplyStatsData;
    legendData.value = props.housingSupplyStatsData.legendData;
    xAxisData.value = props.housingSupplyStatsData.xAxisData;
    yAxisData.value = props.housingSupplyStatsData.yAxisData;
    seriesData.value = props.housingSupplyStatsData.seriesData;
    getEchart();
  });
  
  onMounted(() => {
    getEchart();
    window.addEventListener("resize", () => {
      if (myChart.value) {
        myChart.value.dispose(); // 销毁旧图表实例
      }
      getEchart(); // 创建新的图表实例
    });
  });
  
  onUnmounted(() => {
    window.removeEventListener("resize", () => {
      if (myChart.value) {
        myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
      }
    });
  });
  </script>
  
<style scoped lang="less">
.line_box{
  width: 100%;
  height:100%;
}
</style>
  